<!DOCTYPE html>
<html lang="{{config.locale}}">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{{#meta.title}}{{meta.title}} - {{/meta.title}}{{config.site_title}}</title>
    {{#meta.description}}
    <meta name="description" content="{{meta.description}}">{{/meta.description}}
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="{{config.base_url}}/favicon.ico">
    <link rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/bootstrap.min.css">
    <script>var rn_base_url = "{{config.base_url}}";</script>
    <link rel="stylesheet" href="{{config.base_url}}/styles/raneto.css">
    <link rel="stylesheet" href="{{config.base_url}}/styles/login-form.css">
    <link rel="stylesheet" href="{{config.base_url}}/styles/login-style.css">
    <link rel="stylesheet" href="{{config.base_url}}/styles/zocial.css">
    {{#rtl_layout}}
    <link rel="stylesheet" href="{{config.base_url}}/styles/raneto.rtl.css">
    <link rel="stylesheet" href="{{config.base_url}}/lib/bootstrap-rtl/dist/css/bootstrap-rtl.min.css">
    {{/rtl_layout}} {{{config.analytics}}}
</head>

<body class="{{body_class}}">
    <!-- Main -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-4 offset-4 form-box">
                <div class="form-top">
                    <div class="form-top-left">
                        <h1>Raneto</h1>
                    </div>
                    <div class="form-top-right">
                        <img src="{{config.base_url}}/favicon.ico"></i>
                    </div>
                </div>

                <div class="form-bottom">
                    {{#googleoauth}}
                      <a href="/auth/login" class="zocial google">Sign in with Google</a>
                    {{/googleoauth}}

                    {{^googleoauth}}
                      <form role="form" action="" method="post" class="login-form">
                        <div class="form-group">
                          <label class="sr-only" for="form-username">{{lang.login.username}}</label>
                            <input tabindex="1" type="text" name="username" placeholder="{{lang.login.username}}" class="form-username form-control" id="form-username">
                          </div>
                          <div class="form-group">
                            <label class="sr-only" for="form-password">{{lang.login.password}}</label>
                            <input tabindex="2" type="password" name="password" placeholder="{{lang.login.password}}" class="form-password form-control" id="form-password">
                          </div>
                          <button type="submit" class="btn">{{lang.login.login}}</button>
                      </form>
                    {{/googleoauth}}
                </div>
            </div>
        </div>
    </div>
    <!-- Footer -->
    <footer class="footer">
        <div class="container-fluid">
            {{#config.copyright}}
            <p class="copyright float-right">{{{config.copyright}}}</p>
            {{/config.copyright}}
        </div>
    </footer>
    <!-- JavaScript -->
    <script src="{{config.base_url}}/lib/jquery/dist/jquery.min.js"></script>
    <script src="{{config.base_url}}/lib/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="{{config.base_url}}/lib/jquery-backstretch/jquery.backstretch.min.js"></script>
    <script src="{{config.base_url}}/lib/sweetalert2/dist/sweetalert2.all.min.js"></script>
    <script src="{{config.base_url}}/scripts/login.js"></script>
    <script>
    $(document).ready(function() {
        $.backstretch("{{config.base_url}}/images/background.jpg");
    });
    </script>
</body>

</html>
